<template>
  <section class="contSty">
    <span :class="classFlag">
      {{columnValue}}
    </span>
    <div v-if="([1,2].includes(icon) && fieldName==='prepayFee'&&row.prepayFeedFlag===1) 
    || ([1,2].includes(icon) && fieldName==='arrivePayFee'&&row.arrivePayFeedFlag===1) 
    || ([1,2].includes(icon) && fieldName==='collectionFee'&&row.collectionFeedFlag===1) 
    || ([1,2].includes(icon) && fieldName==='receiptFee'&&row.receiptFeedFlag===1)"
         class="iconSty">{{icon===1?'已收':'已付'}}</div>
  </section>
</template>

<script>
export default {
  name: "ObjectColumn",
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    fieldName: {
      type: String,
      default: ""
    },
    objName: {
      type: String,
      default: ""
    },
    classFlag: {
      type: String,
      default: ""
    },
    icon: {
      type: Number,
      default: null
    },
    isFormatNumber: {
      type: Number,
      default: 1
    }
  },
  computed: {
    formatNumber () {
      return num => num ? Number(num).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') : 0;
    },
    columnValue () {
      const { isFormatNumber, row, objName, fieldName } = this;
      if (isFormatNumber) {
        return row[objName] && row[objName][fieldName] ? this.formatNumber(row[objName][fieldName]) : 0
      } else {
        return (row[objName] && row[objName][fieldName]) || 0;
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.red {
  color: var(--prev-color-text-red);
}
.contSty {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.iconSty {
  border: 1px #ef8555 solid;
  width: 32px;
  font-size: 10px;
  height: 18px;
  line-height: 16px;
  padding: 0 3px;
  color: #ef8555;
  margin-left: 5px;
}
</style>
